<template>
    <div class="box">
        <div class="condition">
            <div>时间查询</div>
            <div>
                <div class="block">
                    <el-date-picker v-model="riqi" value-format="yyyy-MM-dd HH:mm" type="datetimerange" align="right"
                        start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
                    </el-date-picker>
                </div>
            </div>
            <div>传感器类型</div>
            <div>
                <el-select v-model="Jclx" placeholder="请选择传感器类型" @change="typelist">
                    <el-option v-for="item in options" :key="item.ID" :label="item.SensortypeType"
                        :value="item.SensortypeType">
                    </el-option>
                </el-select>
            </div>
            <div>巷道</div>
            <div>
                <el-select v-model="hangdao" placeholder="请选择上下顺槽" @change="leixing">
                    <el-option v-for="item in scList" :key="item.ID" :label="item.Name" :value="item.Name">
                    </el-option>
                </el-select>
            </div>
            <div style="color: white; font-size: 14px;">安装位置</div>
            <div>
                <el-select v-model="WeiZhi" placeholder="请选择">
                    <el-option v-for="item in WeiZhiList" :key="item.ID" :label="item.location" :value="item.location">
                    </el-option>
                </el-select>
            </div>
            <div style="margin-left: 5px;"><el-button type="warning" @click="Query">查询</el-button></div>
            <!-- <div><el-button type="success" plain>重置</el-button></div> -->
            <div>
                <el-button style="
            background-color: rgb(40, 103, 185);
            border-color: rgb(40, 103, 185);
            color: white;
            margin-left: 7px;
          " size="max" class="el-icon-printer" @click="printJson">打印</el-button>
            </div>
            <!-- <el-button style="
          background-color: rgb(179, 225, 157);
          border-color: rgb(179, 225, 157);
          color: white;
          margin-left: 7px;
          width: 40;
          display: flex;
        " size="min" class="el-icon-printer" @click="Export">
                <xslx ref="xslx" />导出
            </el-button> -->


        </div>

        <div class="Tbale">
            <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" :header-cell-style="{
                        background: 'rgb(40,103,185)',
                        color: 'white',
                        borderColor: 'rgb(43,88,144)',
                        'text-align': 'center',
                    }" :cell-style="{ 'text-align': 'center' }" height="400"
                style="width: 100%; padding: 0; height: 400px">
                <el-table-column prop="location" label="安装位置" width="350">
                </el-table-column>
                <el-table-column prop="unit" label=" 计量单位" width=""> </el-table-column>
                <el-table-column prop="state" label="测点状态" width=""> </el-table-column>
                <el-table-column prop="InitialValue" label="初始值" width=""> </el-table-column>
                <el-table-column prop="ThisValue" label="监测数值" width=""> </el-table-column>
                <el-table-column prop="CHValue" label=" 变化数值" width=""> </el-table-column>
                <el-table-column prop="time" label="时间" width="150"> </el-table-column>

            </el-table>
            <div class="block1" style="width: 100%; height: 45px; text-align: right">
                <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
                    :current-page="currentPage4" :page-sizes="[pageSize]"
                    layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
                </el-pagination>
            </div>
        </div>
        <div id="echart">
            <div class="echart1" id="mychart1" style="width: 100%; height: 300px"></div>
        </div>

        <el-dialog class="dialog" title="预览" @open="handleDialogOpen" :visible.sync="StaticBoard" width="80%">
            <div style=" width: 100%; display: flex; justify-content: flex-end">
                <el-button v-print="printViewInfo" type="primary">打 印</el-button>
                <el-button @click="StaticBoard = false">取 消</el-button>
            </div>
            <div id="printView">
                <div style="page-break-after:always" class="box">
                    <div id="produceRadio2" style="width: 1200px; height: 300px; margin: 0 auto;"> </div>
                    <div class="table">
                        <table id="printable-table" style="width: 95%;margin: 0 auto; border-collapse: collapse;">
                            <thead>
                                <tr>
                                    <th style="padding: 5px 10px; border: 1px solid #333; ;">安装位置</th>
                                    <th style="padding: 5px 10px; border: 1px solid #333; width: 100px;">计量单位</th>
                                    <th style="padding: 5px 10px; border: 1px solid #333; width: 100px;">测点状态</th>
                                    <th style="padding: 5px 10px; border: 1px solid #333; width: 100px;">初始值</th>
                                    <th style="padding: 5px 10px; border: 1px solid #333; width: 100px;">监测数值</th>
                                    <th style="padding: 5px 10px; border: 1px solid #333; width: 100px;">变化数值</th>
                                    <th style="padding: 5px 10px; border: 1px solid #333;width: 200px;">时间</th>

                                </tr>

                            </thead>
                            <tbody>
                                <!-- 表格数据行 -->
                                <tr v-for="(item, index) in tableData" :key="index">
                                    <td
                                        style="padding: 5px 10px;  border: 1px solid rgb(70,98,95);  text-align: center;">
                                        {{ item.location
                                        }}</td>

                                    <td
                                        style="padding: 5px 10px;  border: 1px solid rgb(70,98,95);  text-align: center;">
                                        {{ item.unit
                                        }}</td>


                                    <td
                                        style="padding: 5px 10px;  border: 1px solid rgb(70,98,95);  text-align: center;">
                                        {{ item.state
                                        }}</td>


                                    <td
                                        style="padding: 5px 10px;  border: 1px solid rgb(70,98,95);  text-align: center;">
                                        {{ item.InitialValue
                                        }}</td>

                                    <td
                                        style="padding: 5px 10px;  border: 1px solid rgb(70,98,95);  text-align: center;">
                                        {{ item.ThisValue
                                        }}</td>


                                    <td
                                        style="padding: 5px 10px;  border: 1px solid rgb(70,98,95);  text-align: center;">
                                        {{ item.CHValue
                                        }}</td>

                                    <td
                                        style="padding: 5px 10px;  border: 1px solid rgb(70,98,95);  text-align: center;">
                                        {{ item.time
                                        }}</td>




                                    <!-- 其他数据 -->
                                </tr>

                            </tbody>
                        </table>
                    </div>
                    <div style="width: 90%; margin: 0 auto;">
                        <div style="font-weight: 900; "> 总结：</div>

                        <div style="margin-left: 25px;"> {{ baoGaoText }}</div>
                    </div>
                    <div class="sign">

                        <div>
                            <div>操作人签字：</div>
                            <div></div>
                        </div>

                        <div>
                            <div>审核人签字：</div>
                            <div></div>
                        </div>


                        <div>
                            <div>负责人签字：</div>
                            <div></div>
                        </div>



                    </div>
                </div>
            </div>
            <!-- <span slot="footer" class="dialog-footer">
       
        <el-button v-print="printViewInfo" type="primary">打 印</el-button>
        <el-button @click="StaticBoard = false">取 消</el-button>
      </span> -->
        </el-dialog>
    </div>
</template>

<script>
import xslx from "../../components/xslx.vue";
import bus from '../../components/bus'
import * as echarts from "echarts";

import { TypeHuoQuAnZhuangJiDian, dingbanbaobiaozhou, dingbanshebeichuanganqipeizhilist, dingbanlishixinxiTypefanhuiweizhi, } from '../../https/api/user'
export default {
    components: { xslx },
    data() {
        return {
            StaticBoard: false,
            msg: "打印",
            printViewInfo: {
                id: "printView", //打印区域的唯一的id属性
                popTitle: '周报表打印', // 页眉文字 （不设置时显示undifined）（页眉页脚可以在打印页面的更多设置的选项中取消勾选）
                extraHead: '', // 最左上方的头部文字，附加在head标签上的额外标签，使用逗号分割
                preview: false, // 是否启动预览模式，默认是false （开启预览模式ture会占满整个屏幕，不建议开启，除非业务需要）
                previewTitle: '', // 打印预览的标题(预览模式preview为true时才显示)
                previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印(预览模式preview为true时才显示)
                zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
                previewBeforeOpenCallback(that) { console.log('正在加载预览窗口！'); console.log(that.msg, this) }, // 预览窗口打开之前的callback (预览模式preview为true时才执行) （that可以取到data里的变量值）
                previewOpenCallback() { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback (预览模式preview为true时才执行)
                beforeOpenCallback() { console.log('开始打印之前！') }, // 开始打印之前的callback
                openCallback() { console.log('执行打印了！') }, // 调用打印时的callback
                closeCallback() { console.log('关闭了打印工具！') }, // 关闭打印的callback(无法区分确认or取消)
                clickMounted() { console.log('点击v-print绑定的按钮了！') },
                // url: 'http://localhost:8080/', // 打印指定的URL，确保同源策略相同
                // asyncUrl (reslove) {
                //   setTimeout(() => {
                //     reslove('http://localhost:8080/')
                //   }, 2000)
                // },
                standard: '',
                extarCss: ''
            },
            pageSize: 14,
            currentPage: 1,
            currentPage4: 1,
            Jclx: "",
            riqi: "",
            WeiZhi: '',
            hangdao: '',
            WeiZhiList: [],
            options: [],
            tableData: [],
            RiZheXian: [],
            yujing: "",
            baojing: "",
            Num: '',
            // shuncao:[
            //  {
            //   value:'上顺槽'
            //  },
            //  {
            //   value:'下顺槽'
            //  },
            // ],
            scList: [

            ],
            baoGaoText: '',
            biaoti: [],
            a: []
        };
    },
    mounted() {
        this.baojingType();
        // this.initEcharts()

    },
    methods: {
        async typelist() {
            const data = {
                type: this.Jclx
            }
            const res = await TypeHuoQuAnZhuangJiDian(data)
            console.log(res, '根据传感器类型返回安装基点');
            this.scList = res
        },
        leixing() {
            const data = {
                SensorType: this.Jclx,
                sx: this.hangdao
            }
            dingbanlishixinxiTypefanhuiweizhi(data).then(res => {
                console.log('根据传感器类型 返回传感器安装位置', res);
                this.WeiZhiList = res
            })
        },
        initEcharts() {
            // 基本柱状图
            var option = {
                // backgroundColor: "#FFF0F5",
                legend: {
                    data: this.a,
                    textStyle: {
                        color: [],
                    },
                },


                //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
                grid: {
                    top: 35,
                    left: 40,
                    right: 30,
                    bottom: 35,
                },


                tooltip: {
                    show: true,
                },
                xAxis: {
                    name: "",
                    type: "category",
                    boundaryGap: true,
                    axisLine: {
                        lineStyle: {
                            // 设置x轴颜色
                            color: "rgb(83,249,209)",
                        },
                    },
                    // 设置X轴数据旋转倾斜
                    axisLabel: {
                        rotate: -15, //代表逆时针旋转
                    },
                    // boundaryGap值为false的时候，折线第一个点在y轴上
                    data: this.RiZheXian.locations,


                },
                dataZoom: [
                    //Y轴滑动条

                    {
                        type: 'inside',  //内置滑动，随鼠标滚轮展示
                        start: 1,//初始化时，滑动条宽度开始标度
                        end: 50  //初始化时，滑动条宽度结束标度

                    }],

                yAxis: [
                    {
                        type: 'value',
                       

                    },
                   
                ],

                series: [
                    {
                        name: this.RiZheXian.AZJDs[0],
                        type: 'bar',
                        data: this.RiZheXian.Valueone,
                        barWidth: 20, // 设置柱子的宽度为相对于类目宽度的 50%
                        lineStyle: {
                            width: 5 // 设置线条宽度为3
                        },
                        markLine: {
                            symbol: ['none', 'none'],    //表示箭头从左向右
                            label: {
                                show: true,
                                position: "middle",    //将警示值放在哪个位置，start middle end 开头 中间 结尾
                                //formatter: "60%",   //警示线上显示内容

                            },
                            data: [
                                {
                                    name: "报警线",
                                    yAxis: this.baojing,
                                    // yAxis: 30,
                                    lineStyle: {
                                        color: "#f33",
                                        type: "solid",
                                        width: 3,
                                    },
                                    label: {
                                        fontSize: 15,
                                        color: 'red',
                                        formatter: (e) => { return '报警线' }
                                    }
                                },
                                {
                                    name: "预警线",
                                    yAxis: this.yujing,
                                    // yAxis: 20,
                                    lineStyle: {
                                        color: "yellow",
                                        type: "solid",
                                        width: 3,
                                    },
                                    label: {
                                        fontSize: 15,
                                        color: 'yellow',
                                        formatter: (e) => { return '预警线' }
                                    }
                                },

                            ],
                        },
                    },

                    {
                        name: this.RiZheXian.AZJDs[1],
                        type: 'bar',
                        data: this.RiZheXian.Valuetwo,
                        barWidth: 20, // 设置柱子的宽度为相对于类目宽度的 50%

                    },


                ],

                // color: ["rgb(83,249,209)"],
            };
            const myChart = echarts.init(document.getElementById("mychart1"));
            myChart.setOption(option);
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        },
        produceRadiooo() {
            // 基本柱状图
            var option = {
                // backgroundColor: "#FFF0F5",
                legend: {
                    data: this.a,
                    textStyle: {
                        color: [],
                    },
                },


                //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
                grid: {
                    top: 35,
                    left: 40,
                    right: 30,
                    bottom: 35,
                },


                tooltip: {
                    show: true,
                },
                xAxis: {
                    name: "",
                    type: "category",
                    boundaryGap: true,
                    axisLine: {
                        lineStyle: {
                            // 设置x轴颜色
                            color: "rgb(83,249,209)",
                        },
                    },
                    // 设置X轴数据旋转倾斜
                    axisLabel: {
                        rotate: -15, //代表逆时针旋转
                    },
                    // boundaryGap值为false的时候，折线第一个点在y轴上
                    data: this.RiZheXian.locations,


                },
                dataZoom: [
                    //Y轴滑动条

                    {
                        type: 'inside',  //内置滑动，随鼠标滚轮展示
                        start: 1,//初始化时，滑动条宽度开始标度
                        end: 50  //初始化时，滑动条宽度结束标度

                    }],

                yAxis: [
                    {
                        type: 'value',
                     
                    },
                   
                ],

                series: [
                    {
                        name: this.RiZheXian.AZJDs[0],
                        type: 'bar',
                        data: this.RiZheXian.Valueone,
                        barWidth: 20, // 设置柱子的宽度为相对于类目宽度的 50%
                        lineStyle: {
                            width: 5 // 设置线条宽度为3
                        },
                        markLine: {
                            symbol: ['none', 'none'],    //表示箭头从左向右
                            label: {
                                show: true,
                                position: "middle",    //将警示值放在哪个位置，start middle end 开头 中间 结尾
                                //formatter: "60%",   //警示线上显示内容

                            },
                            data: [
                                {
                                    name: "报警线",
                                    yAxis: this.baojing,
                                    // yAxis: 30,
                                    lineStyle: {
                                        color: "#f33",
                                        type: "solid",
                                        width: 3,
                                    },
                                    label: {
                                        fontSize: 15,
                                        color: 'red',
                                        formatter: (e) => { return '报警线' }
                                    }
                                },
                                {
                                    name: "预警线",
                                    yAxis: this.yujing,
                                    // yAxis: 20,
                                    lineStyle: {
                                        color: "yellow",
                                        type: "solid",
                                        width: 3,
                                    },
                                    label: {
                                        fontSize: 15,
                                        color: 'yellow',
                                        formatter: (e) => { return '预警线' }
                                    }
                                },

                            ],
                        },
                    },

                    {
                        name: this.RiZheXian.AZJDs[1],
                        type: 'bar',
                        data: this.RiZheXian.Valuetwo,
                        barWidth: 20, // 设置柱子的宽度为相对于类目宽度的 50%

                    },


                ],

                // color: ["rgb(83,249,209)"],
            };
            const myChart = echarts.init(document.getElementById("produceRadio2"));
            myChart.setOption(option);
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        },

        handleSizeChange1(val) {
            this.$data.pageSize = val;
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange1(val) {
            console.log(`当前页: ${val}`);

            this.$data.currentPage = val;
        },
        handleSizeChange(val) {
            this.$data.pageSize = val;
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);

            this.$data.currentPage = val;
        },
        baojingType() {
            const data = {
                w: 1,
            };
            dingbanshebeichuanganqipeizhilist(data).then((res) => {
                console.log("传感器类型类型", res);
                if (res) {
                    this.options = res;
                }
            });
        },
        Query() {
            console.log(this.riqi);
            const data = {
                startTimes: this.riqi[0],
                EndTime: this.riqi[1],
                Type: this.Jclx,
                sx: this.hangdao,
                location: this.WeiZhi,


            }
            dingbanbaobiaozhou(data).then(res => {
                console.log('周报', res);
                if (res) {
                    this.tableData = res[0].Exceldatas;
                    this.RiZheXian = res[0].ZhuZhuangTus[0];
                    console.log(res[0].ZhuZhuangTus[0]);
                    this.a = res[0].ZhuZhuangTus[0].AZJDs
                    this.yujing = res[0].Yujing;
                    this.baojing = res[0].Baojing;
                    this.Num = res[0].Num
                    this.baoGaoText = res[0].AlarmInfo

                }
                this.initEcharts();

            })
        },
        printJson() {
            this.StaticBoard = true
            const data = {
                startTimes: this.riqi[0],
                EndTime: this.riqi[1],
                Type: this.Jclx,
                sx: this.hangdao,
                location: this.WeiZhi,


            }
            dingbanbaobiaozhou(data).then(res => {
                console.log('周报', res);
                if (res) {
                    this.tableData = res[0].Exceldatas;
                    this.RiZheXian = res[0].ZhuZhuangTus;
                    this.yujing = res[0].Yujing;
                    this.baojing = res[0].Baojing;
                    this.Num = res[0].Num
                    this.baoGaoText = res[0].AlarmInfo

                }


            })
        },
        // Export() {
        //     bus.$emit('leixing', this.riqi, this.Jclx)
        //     const data = [
        //         [
        //             "安装位置",
        //             "计量单位",
        //             "测点状态",
        //             "最大值",
        //             "平均值",
        //             "最小值",
        //             "分组",
        //             "时间",
        //         ],
        //     ];
        //     this.tableData.forEach((item) => {
        //         data.push([
        //             item.location,
        //             item.unit,
        //             item.state,
        //             item.max,
        //             item.Avgvalue,
        //             item.min,
        //             item.miningGroup,
        //             item.time,
        //         ]);
        //     });

        //     this.$refs.xslx.xslx(data);
        // },
        handleDialogOpen() {
            //dom完全挂载后调用
            this.$nextTick(() => {
                this.produceRadiooo()
            })

        },
    },
};
</script>

<style lang="less" scoped>
.box {
    width: 100%;
    padding: 0 20px;

    .condition {
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center;

        >div:nth-child(1) {
            color: white;
            font-size: 14px;
        }

        >div:nth-child(2) {
            margin-left: 7px;
        }

        >div:nth-child(3) {
            color: white;
            font-size: 14px;
            margin-left: 7px;
        }

        >div:nth-child(4) {
            margin-left: 7px;
        }

        >div:nth-child(5) {
            color: white;
            font-size: 14px;
            margin-left: 7px;
        }

        >div:nth-child(6) {
            margin-left: 7px;
        }

        >div:nth-child(7) {
            margin-left: 7px;
        }

        >div:nth-child(8) {
            margin-left: 7px;
        }
    }

}

::v-deep .el-table,
.el-table__expanded-cell {
    // padding: 20px !important;
    background-color: transparent !important;
}

::v-deep .el-table tr {
    background-color: transparent !important;
}

::v-deep .el-table--enable-row-transition .el-table__body td,
::v-deep .el-table .cell {
    background-color: transparent !important;
    color: rgb(255, 255, 255) !important;
    border: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

::v-deep .el-table th>.cell {
    color: rgba(254, 254, 254, 1) !important;
    font-weight: 700 !important;
}

.el-table::before {
    //去除底部白线
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 0px !important;
}

/deep/.el-table td.el-table__cell {
    border-bottom: none !important;
}

/* 取消el-table鼠标移入高亮 */
div /deep/ .el-table tbody tr:hover>td {
    background: #ccc !important;
}

div /deep/ .el-table tbody tr {
    pointer-events: none;
}

::v-deep .el-form-item__label {
    color: white !important;
}

.picker {
    height: 40px;
    background-color: rgb(14, 26, 55);

    ::v-deep .el-range-input {
        background-color: rgb(14, 26, 55);
    }
}

::v-deep .el-input__inner {
    background-color: transparent !important;
    border-color: rgb(46, 95, 152);
}

::v-deep .el-table__fixed {
    // 左固定列
    height: auto !important;
    bottom: 12px; // 改为自动高度后，设置与父容器的底部距离，高度会动态改变，值可以设置比滚动条的高度稍微大一些,这个根据实际情况改
}

::v-deep .el-table__fixed-right {
    // 右固定列
    height: auto !important;
    bottom: 12px;
}

/deep/ .el-table__body-wrapper {
    height: 750px;
    /* 滚动条整体高 必须项 */
    border-right: none;
    overflow-y: scroll;
    /* overflow-y为了不出现水平滚动条*/
}

/deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 5px;
    /* 滚动条的宽高 必须项 */
    height: 10px;
}

/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 10px;
    /*滚动条的圆角*/
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #409eff;
    /*滚动条的背景颜色*/
}

::v-deep.el-date-editor .el-range-input {
    background-color: rgb(14, 26, 55);
    //日期背景色
}

.index-box {
    padding: 0 1px 0 0;
}

@media print {
    border: 1px solid red;

    /* 表格样式 */
    table {
        border-collapse: collapse;
        width: 100%;
    }

    th,
    td {

        padding: 8px;
        text-align: center;
    }

    thead {
        display: table-header-group;
        /* 表头始终显示 */
    }

    tfoot {
        display: table-footer-group;
        /* 表尾始终显示 */
    }

    tr {
        page-break-inside: avoid;
        /* 避免在页面断裂时打断表行 */
    }
}


#printView {
    width: 99%;
    margin: 0 auto;
}

#produceRadio {
    width: 90%;
    height: 300px;
    margin: 0 auto;
}

#produceRadioo {
    width: 90%;
    height: 300px;
    margin: 0 auto;
}

.table {
    width: 90%;
    margin: 20px auto;
}

.sign {
    width: 90%;
    height: 60px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;

    >div {
        width: 220px;
        display: flex;
        margin: 0 10px;

        >div:nth-child(1) {
            width: 45%;
            text-align: right;
        }

        >div:nth-child(2) {
            width: 55%;
            border-bottom: 1px solid black;
        }
    }
}
</style>